<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>upload</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
描述：<input id="con" type="text"/>
<br/>
<input id="file" type="file" name="file"/>
<br/>
<button id="upload" type="button">submit</button>
<progress id="progressBar" value="0" max="100"></progress>
<div id="percentage"></div>
<script type="text/javascript">
    $(function(){
        $("#upload").click(function(){
            var formdata = new FormData();
            formdata.append("fdesc", $("#fdesc").val());
            formdata.append("fcon", $("#file")[0].files[0]);
            var xhr = new XMLHttpRequest();
            xhr.open("post", "/files/upload", true);
            xhr.onload = function () {
                // alert("上传完成!");
            };
            xhr.upload.addEventListener("progress", progressFunction, false);
            xhr.send(formdata);
        });
        function progressFunction(evt) {
            var progressBar = document.getElementById("progressBar");
            var percentageDiv = document.getElementById("percentage");
            if (evt.lengthComputable) {
                progressBar.max = evt.total;
                progressBar.value = evt.loaded;
                percentageDiv.innerHTML = "已经上传"+Math.round(evt.loaded / evt.total * 100) + "%";
                if(evt.loaded==evt.total){
                    percentageDiv.innerHTML = "上传完成100%";
                }
            }
        }
    });
</script>
</body>
</html>